<template>
	<view class="main-cont box box-tb">
		<view class="list box box-align-center box-pack-between" v-for="(item,index) in classList" :key="index" @click="goStuList(item)">
			<view class="left box box-align-center box-pack-start">
				<view class="icon"></view>
				<view class="ml15  box box-tb box-align-start">
					<view class="class-name">
						{{item.bjmc}}
					</view>
					<view class="mt10 tab box box-align-center box-pack-center">
						<u-image src="/static/home/icon_group1.png" width="30rpx" height="26rpx"></u-image>
						<view class="ml10">
							{{item.stuNum}}人
						</view>
					</view>
				</view>
			</view>
			<u-icon name="arrow-right"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user:uni.getStorageSync("user"),
				classList:[],
			}
		},
		onLoad() {
			this.getClassList();
		},
		methods: {
			getClassList() {
				this.$api.post({url: '/dclass/trClassList'}, {trid: this.user.id}).then(res => {
					this.classList = res.list;
					//console.log(this.classList)
				})
			},
			goStuList(item){
				uni.navigateTo({
					url:"/trPageMy/stuList?classid="+item.id+"&bjmc="+item.bjmc+"&stuNum="+item.stuNum
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	
	.main-cont{
		width: 100%;
		
		.list{
			padding: 0 39rpx;
			margin: 10rpx 30rpx;
			width: 690rpx;
			height: 236rpx;
			background: #FFFFFF;
			box-shadow: 0px 23rpx 46rpx 0px rgba(205, 207, 230, 0.18);
			border-radius: 30rpx;
			
			.icon {
				width: 14rpx;
				height: 128rpx;
				background: #8A8DF3;
				box-shadow: 4rpx 1rpx 13rpx 0px #626BF1;
				border-radius: 7rpx;
			}
			
			.class-name {
				font-size: 38rpx;
				font-weight: bold;
			}
			
			.tab {
				width: 124rpx;
				height: 34rpx;
				line-height: 34rpx;
				background: #EEEDFC;
				border-radius: 10rpx;
				text-align: left;
				font-size: 26rpx;
				color: #6E73D8;
			}
			
			&:nth-child(2n){
				.icon{
					background: #FE907E;
					box-shadow: 4rpx 1rpx 13rpx 0px #FE907E;
				}
			}
		}
	}
</style>
